import React, { Component } from 'react';
import { Card, Tabs } from 'antd';
import OrderTable from 'components/OrderTable';
import styles from './index.module.less';

const { TabPane } = Tabs;

export default class Order extends Component {
  state = {
    activeKey: '1',
    tabList: [
      {
        key: '1',
        name: '全部',
      },
      {
        key: '2',
        name: '待支付',
      },
      {
        key: '3',
        name: '待发货',
      },
      {
        key: '4',
        name: '待收货',
      },
      {
        key: '5',
        name: '待提货',
      },
      {
        key: '6',
        name: '已完成',
      },
      {
        key: '7',
        name: '待评价',
      },
      {
        key: '8',
        name: '交易成功',
      },
      {
        key: '9',
        name: '售后',
      },
    ],
  };

  render() {
    const { activeKey, tabList } = this.state;

    const dataSource = [
      {
        key: '1',
        tradename: '三级螺纹钢',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png',
        count: 100,
        unit: '顿',
        buyer: '秦岚',
        ordertime: '2018-08-08 16:48:51',
        status: '交易关闭',
        money: '500',
        aftersale: '退货退款中',
      },
      {
        key: '2',
        tradename: '三级螺纹钢',
        img: 'https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png',
        count: 100,
        unit: '顿',
        buyer: '秦岚',
        ordertime: '2018-08-08 16:48:51',
        status: '交易关闭',
        money: '500',
        aftersale: '退货退款中',
      },
    ];

    const columns = [
      {
        title: '商品',
        dataIndex: 'tradename',
        key: 'tradename',
      },
      {
        title: '单价/数量',
        dataIndex: 'count',
        key: 'count',
        render: (text, record) => (
          <a>{record.count}</a>
        ),
      },
      {
        title: '买家',
        dataIndex: 'buyer',
        key: 'buyer',
      },
      {
        title: '下单时间',
        dataIndex: 'ordertime',
        key: 'ordertime',
      },
      {
        title: '订单状态',
        dataIndex: 'status',
        key: 'status',
      },
      {
        title: '实付金额',
        dataIndex: 'money',
        key: 'money',
      },
      {
        title: '售后',
        dataIndex: 'aftersale',
        key: 'aftersale',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <a>发货</a>
        ),
      },
    ];

    return (
      <div className={styles.ui_order}>
        <Card>
44
        </Card>
        <Card>
          <Tabs
            className={styles.tabs}
            activeKey={activeKey}
            onChange={key => this.setState({ activeKey: key })}
          >
            {tabList.map(i => {
              return (
                <TabPane tab={i.name} key={i.key}>
                  <div className={styles.tab_box}>
                    <OrderTable
                      dataSource={dataSource}
                      columns={columns}
                    />
                  </div>
                </TabPane>
              );
            })}
          </Tabs>
        </Card>
      </div>
    );
  }
}
